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Alpha blending 



Alpha blending is 
used to show 
translucent objects 


® Translucent objects 
render by blending 
with the background 


® Opaque objects just 
cover the background 
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Varying alpha 
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Blending order 



The color of a translucent pixel depends 
on the color of the pixel beneath it 

it will blend with that pixel, partially showing 
its color, and partially showing the color of 
the pixel beneath it 

Translucent objects must be rendered 
from far to near 
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Challenge 



It’S very complex and complicated to render 
pixels from far to near 

Object-center sorting is common 

still can be time consuming 


® Object sorting doesn’t guarantee pixel sorting 

objects can intersect each other 

objects can be concave 

pixel sorting is required for correctness 
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The Formula 


CO*’ ■. ioo? I" 


CO: foreground RGB color 

AO: alpha representing foreground’s 
translucency 


© DO: background RGB color 

© FinalColor = AO * CO + (1 - AO) * DO 

as AO varies between 0 and 1, FinalColor 
varies between DO and CO 
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Multiple translucent layers 
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Formula for multiple 
translucent layers 

® Cn: RGB from layer 
® An: Alpha from layer 
® DO: background 
® D1 = AO*CO + (1 - AO)*D0 

® D2 = A1*C1 + (1 - A1)*D1 

® D3 = A2*C2 + (1 - A2)*D2 

® D4 = A3*C3 + (1 - A3)*D3 
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Expanding the formula 



D4 = A3*C3 
+ A2*C2*(1 
+ A1*C1*(1 
+ A0*C0*(1 
+ D0*(1 


A3) 

A3)*(l - A2) 

A3)*(l - A2)*(l - Al) 

A3)*(l - A2)*(l - Al)*(l - A0) 
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Further expanding 



D4 = A3*C3 

+ A2*C2 - A2*A3*C2 

+ A1*C1 - A1*A3*C1 - A1*A2*C1 + A1*A2*A3*C1 
+ A0*C0 - A0*A3*C0 - A0*A2*C0 + A0*A2*A3*C0 

- A0*A1*C0 + A0*A1*A3*C0 + A0*A1*A2*C0 - A0*A1*A2*A3*C0 
+ D0 - A3*D0 - A2*D0 + A2*A3*D0 - A1*D0 

+ A1*A3*D0 + A1*A2*D0 - A1*A2*A3*D0 - A0*D0 
+ A0*A3*D0 + A0*A2*D0 - A0*A2*A3*D0 + A0*A1*D0 

- A0*A1*A3*D0 - A0*A1*A2*D0 + A0*A1*A2*A3*D0 
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Rearranging 



D4 = DO 

+ A0*C0 + A1*C1 + A2*C2 + A3*C3 

- A0*D0 - A1*D0 - A2*D0 - A3*D0 
+ A0*A3*D0 + A0*A2*D0 + A0*A1*D0 
+ A1*A3*D0 + A1*A2*D0 + A2*A3*D0 

- A0*A3*C0 - A0*A2*C0 - A0*A1*C0 

- A1*A3*C1 - A1*A2*C1 - A2*A3*C2 

+ A0*A1*A2*C0 + A0*A1*A3*C0 + A0*A2*A3*C0 + A1*A2*A3*C1 

- A0*A1*A2*D0 - A0*A1*A3*D0 - A0*A2*A3*D0 - A1*A2*A3*D0 
+ A0*A1*A2*A3*D0 

- A0*A1*A2*A3*C0 
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Sanity check 



Let’s make sure the expanded formula is 
still correct 

case where all alpha = 0 

D4 = DO 

@ only background color shows (DO) 

case where all alpha = 1 

D4 = C3 

@ last layer’s color shows (C3) 
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Pattern recognition 



D4 = DO 

+ A0*C0 + A1*C1 + A2*C2 + A3*C3 

- A0*D0 - A1*D0 - A2*D0 - A3*D0 

+ A0*A3*D0 + A0*A2*D0 + A0*A1*D0 
+ A1*A3*D0 + A1*A2*D0 + A2*A3*D0 

- A0*A3*C0 - A0*A2*C0 - A0*A1*C0 

- A1*A3*C1 - A1*A2*C1 - A2*A3*C2 

+ A0*A1*A2*C0 + A0*A1*A3*C0 + A0*A2*A3*C0 + A1*A2*A3*C1 

- A0*A1*A2*D0 - A0*A1*A3*D0 - A0*A2*A3*D0 - A1*A2*A3*D0 

+ A0*A1*A2*A3*D0 

- A0*A1*A2*A3*C0 

There’s clearly a pattern here 

we can easily extrapolate this for any number of layers 

There is also a balance of additions and subtractions 
with layer colors and background color 
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Order dependence 


D4 = DO 

+ + A1 *ri + 

- A0*D0 - A1*D0 - A2*D0 - A3*D0 ^ Order independent part 

- A0*A1*A2*D0 - A0*A1*A3*D0 - A0*A2*A3*D0 - A1*A2*A3*D0 
+ A0*A1*A2*A3*D0 

- A0*A3*C0 - A0*A2*C0 - A0*A1*C0 


_ a1*A3*C1 - A1*A2*C1 - A2*A3*C2 

+ A0*A3*D0 + A0*A2*D0 + A0*Ai*D0 ^ Order dependent part 

+ A1*A3*D0 + A1*A2*D0 + A2*A3*D0 

+ A0*A1*A2*C0 + A0*A1*A3*C0 + A0*A2*A3*C0 + A1*A2*A3*C1 


- A0*A1*A2*A3*C0 
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Order independent Part 



® 

® 

® 

® 


D4 = DO 

+ A0*C0 + A1*C1 + A2*C2 + A3*C3 

- A0*D0 - A1*D0 - A2*D0 - A3*D0 

- A0*A1*A2*D0 - A0*A1*A3*D0 - A0*A2*A3*D0 
+ A0*A1*A2*A3*D0 


A1*A2*A3*D0 


© Summation and multiplication are both 
commutative operations 

i.e. order doesn’t matter 

@ AO + A1 = A1 + AO 

@ AO * A1 = A1 * AO 

@ A0*C0 + A1*C1 = A1*C1 + A0*C0 
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Order independent Part 



® 

® 

® 

® 


D4 = DO 

+ A0*C0 + A1*C1 + A2*C2 + A3*C3 

- A0*D0 - A1*D0 - A2*D0 - A3*D0 

- A0*A1*A2*D0 - A0*A1*A3*D0 - A0*A2*A3*D0 

+ A0*A1*A2*A3*D0 


A1*A2*A3*D0 


® Highlighted part may not be obvious, but 
here’s the simple proof: 

® - A0*A1*A2*D0 - A0*A1*A3*D0 - A0*A2*A3*D0 - A1*A2*A3*D0 

® = 

® - D0*A0*A1*A2*A3 * (1/A0 + 1/Al + 1/A2 + 1/A3) 
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Order dependent Part 



D4 = ... 

- A0*A3*C0 - A0*A2*C0 - A0*A1*C0 

- A1*A3*C1 - A1*A2*C1 - A2*A3*C2 
+ A0*A3*D0 + A0*A2*D0 + A0*A1*D0 
+ A1*A3*D0 + A1*A2*D0 + A2*A3*D0 

+ A0*A1*A2*C0 + A0*A1*A3*C0 + A0*A2*A3*C0 + A1*A2*A3*C1 

- A0*A1*A2*A3*C0 


o These operations depend on order 

results will vary if transparent layers are reordered 
proof that proper alpha blending requires sorting 
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Can we ignore the order 
dependent part? 

Do these contribute a lot to the final result of the 
formula? 

not if the alpha values are relatively low 
they’re all multiplying alpha values < 1 together 
® even with just 2 layers each with alpha = 0.25 

® 0.25 * 0.25 = 0.0625 which can be relatively insignificant 

more layers also makes them less important 
as do darker colors 
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Error analysis 




Let’s analyze the ignored order dependent part (error) in some 
easy scenarios 
all alphas = 0 
@ error = 0 
all alphas = 0.25 

® error = 0.375*D0 - 0.14453125*00 - 0.109375*01 - 0.0625*02 
all alphas = 0.5 

® error = 1.5*D0 - 0.4375*00 - 0.375*01 - 0.25*02 
all alphas = 0.75 

® error = 3.375*D0 - 0.73828125*00 - 0.703125*01 - 0.5625*02 
all alphas = 1 
® error = 6*D0 -00-01-02 



WWW.GDCONF.COM 


Simpler is better 



A smaller part of the formula works much better 
in practice 

= DO 

+ A0*C0 + A1*C1 + A2*C2 + A3*C3 


- A0*D0 - A1*D0 - A2*D0 - A3*D0 


o The balance in the formula is important 
it maintains the weight of the formula 

o This is much simpler and requires only 2 passes 
and a single render target 

1 less pass and 2 less render targets 

o This formula is also exactly correct when 
blending a single translucent layer 
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Error analysis 



Let’s analyze the simpler formula in some easy scenarios 

all alphas = 0 

® error3i^p„ = 0 
® errorp,3, = 0 

all alphas = 0.25 


@ error 


simple 


= 0.31640625*00 - 0.14453125*00 - 0.109375*01 - 0.0625*02 


@ errorp^3^ = 0.375*00 - 0.14453125*00 - 0.109375*01 - 0.0625*02 

all alphas = 0.5 

@ error3i^p|3 = 1.0625*00 - 0.4375*00 - 0.375*01 - 0.25*02 
@ errorp^3^ = 1.5*00 - 0.4375*00 - 0.375*01 - 0.25*02 
all alphas = 0.75 

@ error3i^p|3 = 2.00390625*00 - 0.73828125*00 - 0.703125*01 - 0.5625*02 
@ errorp^3^ = 3.375*00 - 0.73828125*00 - 0.703125*01 - 0.5625*02 
all alphas = 1 

@ error3:^_,_ = 3*00 -00-01-02 
@ errorpJ= 6*00 -00-01-02 
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Error comparison 



Simpler formula actually has less error 
explains why it looks better 

This is mainly because of the more 
balanced formula 

positives cancelling out negatives 

source colors cancelling out background 
color 



WWW.GDCONF.COM 



Does it really work? 


^ wiij ZOQT If ■ 


Little error with relatively low alpha 
values 

good approximation 


© Completely inaccurate with higher alpha 
values 

© Demo can show it much better than text 
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Sorted, alpha = 0.25 



verts; 4290 







Approx, alpha = 0.25 



verts; 4290 







Sorted, alpha = 0.5 



verts; 4290 
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Approx, alpha = 0.5 



verts; 4290 






A. Js, 

a 




Implementation 


We want to implement the order independent part and just ignore 
the order dependent part 

D4 = DO 

+ A0*C0 + A1*C1 + A2*C2 + A3*C3 

- A0*D0 - A1*D0 - A2*D0 - A3*D0 

- A0*A1*A2*D0 - A0*A1*A3*D0 - A0*A2*A3*D0 - A1*A2*A3*D0 
+ A0*A1*A2*A3*D0 

8 bits per component is not sufficient 

not enough range or accuracy 

Use 16 bits per component (64 bits per pixel for RGBA) 

newer hardware support alpha blending with 64 bpp buffers 

We can use multiple render targets to compute multiple parts of 
the equation simultaneously 
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pass 
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© Use additive blending 

SrcAlphaBlend = 1 
DstAlphaBlend = 1 
FinaIRGBA = SrcRGBA + DstRGBA 

© render target #1, layer 


RGB = An * Cn 
Alpha = An 


© render target #2, layer 

RGB = 1/An 
Alpha = An 
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pass results 



After n translucent layers have been 
blended we get: 

render target #1: 

@ RGBl = AO * CO + A1 * Cl + ... + An * Cn 
@ Alphal = AO + A1 + . . . + An 

render target #2: 

@RGB2 = 1/A0 + 1/A1 + ... + 1/An 
@ Alpha2 = AO + A1 + . . . + An 
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2"'^ pass 



Use multiplicative blending 

SrcAlphaBlend = 0 
DstAlphaBlend = SrcRGBA 
FinaIRGBA = SrcRGBA * DstRGBA 

render target #3, layer 

RGB = Cn 
Alpha = An 
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2"'^ pass results 


After n translucent layers have been 
blended we get: 

render target #3: 

@ RGBS = CO* Cl* ... * Cn 
@ Alphas = AO * A1 * ... *An 

This pass isn’t really necessary for the 
better and simpler formula 

just for completeness 


i f 
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Results 



We now have the following 
background 
© DO 

render target #1: 

© RGBl = AO * CO + A1 * Cl + ... + An * Cn 
© Alphal = AO + A1 + ... + An 
render target #2: 

© RGB2 = 1/A0 + 1/A1+ ... + 1/An 
© Alpha2 = AO + A1 + ... + An 
render target #3: 

© RGBS = CO* Cl* ... * Cn 
© Alphas = AO * A1 * ... *An 
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Final pass 




Blend results in a pixel shader 
RGBl- DO*Alphal 

= A0*C0 + A1*C1 + A2*C2 + A3*C3 

- D0 * (A0 + A1 + A2 + A3) 

DO * Alphas 

= D0 * (A0*A1*A2*A3) 

DO * RGB2 * Alphas 

= D0 * (1/A0 + 1/Al + 1/A2 + 1/A3) * (A0*A1*A2*A3) 
= D0 * (A1*A2*A3 + A0*A2*A3 + A0*A1*A3 + A0*A1*A2) 

Sum results with background color (DO) and we get: 

= D0 

+ A0*C0 + A1*C1 + A2*C2 + A3*C3 

- D0 * (A0 + A1 + A2 + A3) 

+ D0 * (A0*A1*A2*A3) 

- D0 * (A1*A2*A3 + A0*A2*A3 + A0*A1*A3 + A0*A1*A2) 

That’s the whole sort independent part of the blend formula 
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Application 



This technique is best suited for particles 

too many to sort 

slight inaccuracy in their color shouldn’t matter too 
much 


® Not SO good for very general case, with all 
ranges of alpha values 

® For general case, works best with highly 
translucent objects 

i.e. low alpha values 
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Can we do better? 



I hope so... 

Keep looking at the order dependent part of the formula to see if 
we can find more order independent parts out of it 

D4 = DO 

+ A0*C0 + A1*C1 + A2*C2 + A3*C3 

- A0*D0 - A1*D0 - A2*D0 - A3*D0 

- A0*A1*A2*D0 - A0*A1*A3*D0 - A0*A2*A3*D0 - A1*A2*A3*D0 
+ A0*A1*A2*A3*D0 

- A0*A3*C0 - A0*A2*C0 - A0*A1*C0 

- A1*A3*C1 - A1*A2*C1 - A2*A3*C2 
+ A0*A3*D0 + A0*A2*D0 + A0*A1*D0 
+ A1*A3*D0 + A1*A2*D0 + A2*A3*D0 

+ A0*A1*A2*C0 + A0*A1*A3*C0 + A0*A2*A3*C0 + A1*A2*A3*C1 

- A0*A1*A2*A3*C0 



Or use a completely different algorithm 
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Q&A 

If you have any other ideas or 
suggestions I’d love to hear them 

email: hmeshkin@perpetual.com 
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